<template>
  <div>
    <!-- 页面设置 -->
    <div class="model">
      <div class="tools">
        <el-button @click="edit" type="warning">编辑</el-button>
        <el-button @click="add" type="primary">提交</el-button>
      </div>
      <div>
        <el-form :model="form" label-width="120px">
          <el-form-item label="地址修改">
            <el-input
              v-model="form.dz"
              placeholder="地址修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式修改">
            <el-input
              v-model="form.dh"
              placeholder="联系方式修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司名称修改">
            <el-input
              v-model="form.gs_mc"
              placeholder="修改公司名称"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="邮箱修改">
            <el-input
              v-model="form.email"
              placeholder="邮箱修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="办公时间修改">
            <el-input
              v-model="form.time"
              placeholder="办公时间修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="友情名1修改">
            <el-input
              v-model="form.a1"
              placeholder="友情名1修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="友情链接1修改">
            <el-input
              v-model="form.b1"
              placeholder="友情链接1修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="友情名2修改">
            <el-input
              v-model="form.a2"
              placeholder="友情名1修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="友情链接2修改">
            <el-input
              v-model="form.b2"
              placeholder="友情链接1修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="友情名3修改">
            <el-input
              v-model="form.a3"
              placeholder="友情名1修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="友情链接3修改">
            <el-input
              v-model="form.b3"
              placeholder="友情链接1修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="友情名4修改">
            <el-input
              v-model="form.a4"
              placeholder="友情名1修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="友情链接4修改">
            <el-input
              v-model="form.b4"
              placeholder="友情链接1修改"
              :disabled="!editFlag"
            ></el-input>
          </el-form-item>
          <el-form-item label="二维码">
            <el-input
              placeholder="输入二维码地址"
              v-model="form.ewm"
              :disabled="!editFlag"
            >
              <el-button
                slot="append"
                icon="el-icon-check"
                @click="checkEwm"
              ></el-button>
            </el-input>
            <div>
              <el-image :src="ewmPath"></el-image>
            </div>
            <!-- <input
              type="file"
              @change="changeFile"
              ref="file"
              v-show="false"
              multiple="false"
            /> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editFlag: false,
      imgShow: false,
      formData: "",
      ewmPath: "",
      file: "",
      form: {
        dz: "",
        dh: "",
        gs_mc: "",
        // email: "",
        // time: "",
        // link: "",
        a1: "",
        b1: "",
        a2: "",
        b2: "",
        a3: "",
        b3: "",
        a4: "",
        b4: "",
        ewm: "",
        czr: this.$store.state.userCode
      }
    };
  },
  methods: {
    getData() {
      this.editFlag = false;
      this.$http
        .get(this.$baseUrl.searchAdmin, {
          params: {
            pop: "4"
          }
        })
        .then(res => {
          console.log(res);
          this.ewmPath = res.data[0].ewm;
          this.form = {
            ...this.form,
            ...res.data[0]
          };
          console.log("this.form", this.form);
        })
        .catch(err => {
          console.log(err);
        });
    },
    checkEwm() {
      console.log("do");
      this.ewmPath = this.form.ewm;
    },
    changeFile(file) {
      if (file.target.files.length > 1) {
        return this.$message.error("图片只能选择一个");
      }
      // this.formData = new FormData();
      // this.formData.set("ewm", file.target.files[0]);
      this.file = file.target.files[0];
      const filePath = this.getObjectURL(file.target.files[0]);
      this.ewmPath = filePath;
    },
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    sendData(form) {
      const formData = new FormData();
      formData.set("ewm", this.file);
      for (let i in form) {
        formData.set(i, form[i]);
      }
      console.log(formData);

      this.$http
        .post(this.$baseUrl.editBottom, formData)
        .then(res => {
          console.log(res);
          if (res.data[0].pop == "0") {
            this.getData();
            return this.$message.success(res.data[0].log);
          } else {
            return this.$message.error(res.data[0].log);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    add() {
      this.sendData(this.form);
    },
    edit() {
      this.editFlag = true;
    },
    del() {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const form = {
            dz: "",
            dh: "",
            gs_mc: "",
            // email: "",
            // time: "",
            // link: "",
            a1: "",
            b1: "",
            a2: "",
            b2: "",
            a3: "",
            b3: "",
            a4: "",
            b4: "",
            ewm: "",
            czr: this.$store.state.userCode
          };
          this.sendData(form);
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped lang="scss">
.model {
  .tools {
    padding: 30px 0;
    border-bottom: 1px solid #999;
    margin-bottom: 30px;
  }
}
</style>
